<template>
  <div class="p-8" v-if="data">
    <CellBox title="基础信息">
      <ElFormItemBox label="订单单号" prop="saleOrderGroupNumber">
        <ElInputBox :data="data" dataName="saleOrderGroupNumber" disabled />
      </ElFormItemBox>
      <ElFormItemBox label="创建人员" prop="creatorName">
        <ElInputBox :data="data" dataName="creatorName" disabled />
      </ElFormItemBox>
      <ElFormItemBox label="创建日期" prop="createTime">
        <ElInputBox :data="data" dataName="createTime" disabled />
      </ElFormItemBox>
      <ElFormItemBox label="客户名称" prop="customerName">
        <ElSelectBox :data="data" dataName="customerCode" dataLabel="customerName" :options="options.customer"
          @changeBtn="changeBtn" :disabled="!isEdit" />
      </ElFormItemBox>
    </CellBox>
    <CellBox title="价格信息">
      <ElFormItemBox label="订单总额" prop="createTime">
        <ElNumberBox :data="totalActualAmount(data)" unit="元" disabled />
      </ElFormItemBox>
    </CellBox>
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    isEdit?: boolean;
  }>(),
  {

  },
);
const options = reactive({
  customer: [],//客户
})
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', value: any, row: any, items: any[]): void;
}>();
const changeBtn = (value: any, row: any, items: any) => {
  proxy.data.saleOrderList = []
  emit('changeBtn', value, row, items)
};

const totalActualAmount = (data: any) => {
  let price = 0
  if (data) {
    price = proxy.$arrTotal(data.saleOrderList, 'totalAmount');
    price = data.saleOrderList.reduce((number: number, item: any) => {
      return number + Number(item.totalAmount) + item.costList.reduce((costNumber: number, row: any) => {
        return costNumber + Number(row.amount);
      }, 0);
    }, 0)
    data.orderTotalAmount = price; //订单总金额
    data.discountType = 0; //订单折扣：0无折扣；1抹零
    data.discountAmount = 0; //折扣金额
    data.actualAmount = price; //实际金额
  }
  return price;
}

import { getCustomer } from '@/utils/optionsArr.ts';
onMounted(() => {
  getCustomer(options, 'customer');//获取客户信息
});
onUnmounted(() => { });
</script>
<style scoped lang="scss"></style>
